<template>
  <view class="user-container">
      <!-- 用户信息展示 -->
      <view class="user-info">
        <view class="avatar"></view>
        <view class="name">{{ userInfo.role}}</view>
        <view class="admin-id">{{ userInfo.adminId }}</view>
      </view>
  
      <!-- 新增退出按钮 -->
        <wButton 
			class="wbutton"
          text="退出登录"
          @click="handleLogout"
        ></wButton>
    </view>
    
</template>

<script>
import wButton from '../../components/watch-login/watch-button.vue'
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  components: { wButton },
  onShow() {
    this.checkLoginStatus()
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      const userInfo = uni.getStorageSync('userInfo')
      if (!userInfo) {
        uni.redirectTo({ url: '/pages/login/login' })
        return
      }
      this.userInfo = {
          name: userInfo.name,
          adminId: userInfo.adminId || userInfo.id,
          role: userInfo.roleName
        }
    },
    
    // 新增退出方法
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync('userInfo')
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login'
            })
            // 提示退出成功
            uni.showToast({
              title: '已退出登录',
              icon: 'none'
            })
          }
        }
      })
    }
  }
}
</script>

<style>
@import url("css/admin.css");
@import url("../../components/watch-login/css/icon.css");
</style>
